iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 27
1
Modern Web

實作小範例入門 Vue & Vuex 2.0系列 第 27

vue & vuex 27 - 進階路由顯示 - multiples views、nested routes

  • 分享至 

  • xImage
  •  

今天我們將練習 vue-router 兩種進階顯示方式,多重顯示巢狀路由,這樣的設計會讓我們的系統,搭配 router path 顯得語意化且更具結構性。

今天目標:

  1. 我需要 Demo 幫我做一個頁面讓 shop 與 cart 再同一個畫面上,以左右方式顯示。
  2. 設定 shop 可以根據 router path 在頁面下方顯示不同功能。

1. multiples views 多重顯示

vue-router - multiples views
利用一個 path 可以控制多個 view 的方法,

也就是說可以在 app.vue 上面使用多個 <router-view></router-view>

這樣我們要如何設定哪個 <router-view> 要顯示元件呢?

只需要在元件上命名既可,直接看以下範例。

多重顯示 example

vue-router - multiples views example

app.vue

替每個 view 命名,就可以針對使用了!

<div class="row">
  <router-view name="viewLeft" class="col-md-6 viewLeft"></router-view>
  <router-view name="viewRight" class="col-md-6 viewRight"></router-view>
</div>

main.js

在路由表設定 components 物件,

key value
router-view 的 name component

哪一個 view 要顯示哪個 component

  1. 不設定 name 的 view 為 default
  2. 注意!多重顯示為設定:components
{
  path: '/multiple',
  name: 'multiple',
  components: {
    viewLeft: shop,
    viewRight: cart,
  },
  meta: { requiresAuth: false },
},

2. nested routes 巢狀路由

vue-router - nested routes

概念是,第一層 path 顯示的元件中還可以嵌入第二層 path 元件的路由方式。

如:shop/cart

第一層我們會載入 shop 元件,然後在 shop 裡面會載入第二層 path cart 元件

巢狀路由 example

vue-router - nested routes example

shop.vue

在第一層元件中(shop.vue)插入 <router-view></router-view>在你希望顯示第二層元件的地方。

<template>
<div id="shop">
  <!--shop code 略.. -->
  
  <!-- nested-routes -->
  <router-view class="nested-routes"></router-view>
  
</div>
</template>

main.js

在第一層 path 下面使用 children 設定第二層的 path 與相對應的 component

{
  path: '/shop',
  name: 'shop',
  component: shop,
  meta: { requiresAuth: false },
  children: [ // 將會把對應到 path 的 component 放到 shop 的 <router-view />
    {
      path: 'cart', // url= shop/cart
      component: cart,
      meta: { requiresAuth: false },
    },
    {
      path: 'todo', // url= shop/todo
      component: todo,
      meta: { requiresAuth: false },
    },
    {
      path: 'hello', // url= shop/hello
      component: Hello,
      meta: { requiresAuth: false },
    },
  ],
},

以上是 vue-router 進階的兩種顯示方式,在應用上面巢狀路由第一層可以固定某塊功能的版面。

比如,以下這種版型。

系統中有一系列功能與 API 都是在操控 user 資料,

我們可以利用巢狀路由,將藍色區塊設計在第一層 path 上,

當使用者切換左邊選單的時候(用 router-link 設計),再去替換掉中間的內容。

http://ithelp.ithome.com.tw/upload/images/20161228/20103326WAn0DXuRhV.png


github 完整範例:

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。


上一篇
vue & vuex 26 - 使用 SASS 管理 CSS - webpack sass-loader
下一篇
vue & vuex 28 - custom Directive (toggle password)
系列文
實作小範例入門 Vue & Vuex 2.030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言